<script setup lang="ts">
import { ref } from "vue";
import { Field,Icon } from "vant";
const password = ref("");
const iconName = ref("closed-eye");
const islook = ref(false);
// 密码隐藏显示
const passworkLook = () => {
  islook.value = !islook.value;
  if (islook.value == true) {
    iconName.value = "eye-o";
  } else {
    iconName.value = "closed-eye";
  }
};
defineExpose({
  password,
});
</script>
<template>
  <Field
    v-model="password"
    :type="islook ? 'text' : 'password'"
    label="密码"
    placeholder="请输入密码"
  >
    <template v-slot:right-icon>
      <span class="solts" @click="passworkLook">
        <Icon :name="iconName" class="pass-icon" />
      </span>
    </template>
    <!-- <van-icon :name="iconName" class="pass-icon" @click="passworkLook" /> -->
  </Field>

  <!-- <van-icon :name="iconName" class="pass-icon" @click="passworkLook" /> -->
</template>
<style lang="scss" scoped>
::v-deep .van-field__control {
  text-align: right;
  padding-right: 20px;
}
::v-deep .van-field__label {
  width: auto;
  margin-right: 20px;
  label {
    color: #666666;
  }
}
.pass-icon {
  position: absolute;
  color: #1677ff;
  top: 2px;
  right: 0px;
  font-size: 20px;
}
</style>
